/**
 * Created by Administrator on 2017/03/13 0013.
 */
import React,{Component} from 'react';
import {connect} from 'react-redux';

import HeaderBar from '../../components/headerNav/headBar'
import {hashHistory} from 'react-router'
import cookie from 'react-cookie'
import { Popup } from 'react-weui'
import {port} from '../../public'
import {dispatchFetchData} from  '../../actions/userAction'
import GiftItem from '../../components/myInfo/giftItem'
import './index.css'

class MyGift extends Component{
    constructor(props){
        super(props);
        this.state = {
            detailShow: false,
            userPhone:this.props.location.query.phone,
            token:this.props.location.query.token,
            isIOsApp:false,
            prizeModelList:[],
            orderList:[]
        }
    }

    componentDidMount(){
        const {dispatchFetchData} =this.props

        if(this.props.location.query.phone){
            dispatchFetchData({
                type: 7,
                phone:this.state.userPhone
            })
            this.getEnrollOrder(cookie.load('userId'));
        }else if(this.props.location.query.token){
            this.getPrizeResult(this.props.location.query.token);
            this.getEnrollOrder(this.props.location.query.token);
            fetch(port + '/card/user?token='+this.state.token)
                .then( res=>{
                    return res.json();
                })
                .then( json =>{
                    dispatchFetchData({
                        type: 7,
                        phone:json.phone
                    })
                })
                .catch(e =>{
                    console.log(e)
                })
        }else{
            try{
                let token = window.getNativeAppToken();
                if(window.isNativeApp()){
                    this.setState({
                        isIOsApp:true,
                        token:token
                    })
                    this.getPrizeResult(token);
                    this.getEnrollOrder(token);
                    fetch(port + '/card/user?token='+token)
                        .then( res=>{
                            return res.json();
                        })
                        .then( json =>{
                            dispatchFetchData({
                                type: 7,
                                phone:json.phone
                            })
                        })
                        .catch(e =>{
                            console.log(e)
                        })
                }
            }catch (e){

            }
        }




    }

    getPrizeResult(token){
        //token = '2634ac0d-f9d5-4d2a-b17d-59cae3c55722';
        fetch(port + '/card/userprize/self?token='+token)
            .then( res=>{
                return res.json();
            })
            .then( json =>{
                this.setState({
                    prizeModelList:json.data
                })
            })
            .catch(e =>{
                console.log(e)
            })
    }

    gotoDetail(id){
        console.log('gotoDetail '+id);
        hashHistory.push({
            pathname: '/MyGiftDetail',
            query: {
                giftId:id,
                token:(this.state.token||this.state.isIOsApp)?this.state.token:null
            }
        })
    }



    getEnrollOrder(token){
        // http://121.196.232.233/card/subsOrder/user/oders?token={token}
        let url= port +'/card/subsOrder/user/oders?token='+token
        fetch( url)
            .then(res => {
                console.log(res.status)
                return res.json()
            })
            .then(json=>{
                this.setState({
                    orderList:json.data
                })
            })
            .catch(e =>{
                console.log(e)
            })
    }
    render(){
        const style = {
            color: '#999',
            background: 'none',
            padding: 0,
        };
        const {userGiftList}=this.props;
        return(
        <div>
            {
                userGiftList.length===0&&this.state.prizeModelList.length===0&&
                <div id="myGift" className="panel panel-default">
                    {!(this.props.location.query.token||this.state.isIOsApp) &&
                    <HeaderBar content="我的礼包" type="2"/>
                    }
                    <div className="none">
                        <i />
                        <h3>您还没有礼包</h3>
                    </div>
                </div>
            }
            {/*userGiftList.length!==0&&*/}



            {

                <div id="myGift" className="panel panel-default">
                    {!(this.props.location.query.token||this.state.isIOsApp) &&
                    <HeaderBar content="我的礼包" type="2"/>
                    }
                    {
                        this.state.orderList.length>0&&
                        <div id="isenrollOrder">
                            <a onClick={
                                ()=>{
                                    hashHistory.push({
                                        pathname:'/enrollOrder'
                                    })
                                }

                            }>
                                您有新的预约订单
                            </a>

                        </div>
                    }


                    {
                        this.state.prizeModelList.length!=0&&
                        <div  className="prizeModelList">
                            <div>
                                抽奖结果
                            </div>
                            {
                                this.state.prizeModelList.map((data, index) => {
                                    return (

                                        <div key={index}>
                                            <div className="prizeModelImg">
                                                <img src={data.prizeModel.prizePic} alt=""/>
                                            </div>
                                            <div className="prizeModelName">
                                                {data.prizeModel.prizeName}
                                            </div>
                                        </div>

                                    )
                                })
                            }
                        </div>
                    }
                        <div className={(this.props.location.query.token||this.state.isIOsApp)?"list list2 clearfix":"list clearfix"}>
                            {
                                userGiftList.map( (giftList,index) => {
                                    if(giftList.centerModel){
                                        return(
                                            <GiftItem
                                                key={index}
                                                giftList={giftList}
                                                onClick={this.gotoDetail.bind(this,giftList.id)}
                                            />
                                        )
                                    }
                                })
                            }
                        </div>
                </div>
            }
        </div>
        )
    }
}

function mapStateToProps(state) {
    return{
        userGiftList:state.userReducer.userGiftList,
    }
}

export default connect(
    mapStateToProps, {dispatchFetchData}
)(MyGift)